<template>
    <NuxtLayout name="default">
        <div class="layout-know">
            <div class="know-menu">
                <div class="skinny">
                    <photos width="46px" height="46px" radius="6px" :src="knowData.logo" />
                    <div class="ml-2">
                        <h3 class="text-lg font-medium text-tx-regular">{{ knowData.name }}</h3>
                        <em class="text-xs not-italic text-tx-secondary">
                            <span v-if="knowData.owned">拥有者</span>
                            <span v-else>
                                <template v-if="knowData.power === 1">查看者</template>
                                <template v-if="knowData.power === 2">编辑者</template>
                                <template v-if="knowData.power === 3">管理者</template>
                                <template v-if="knowData.power === 4">拥有者</template>
                            </span>
                        </em>
                    </div>
                </div>
                <div class="option">
                    <div
                        v-for="(item, index) in menusList"
                        :key="index"
                        class="item"
                        :class="currentTab === item.key ? 'active' : ''"
                        @click="handleSwitchMenu(item.key)"
                    >
                        <icon :name="item.icon" :size="20" />
                        <span class="ml-2">{{ item.name }}</span>
                    </div>
                </div>
                <div class="flex justify-center py-3 border-t border-br-extra-light">
                    <el-button :icon="Back" @click="router.back">
                        返回知识库
                    </el-button>
                </div>
            </div>
            <div class="know-body">
                <component
                    :is="componentMap[currentTab]"
                    :know="knowData"
                    :archiveId="archiveId"
                    @to-row="handleSwitchMenu"
                />
            </div>
        </div>
    </NuxtLayout>
</template>

<script setup lang="ts">
import { Back } from '@element-plus/icons-vue'
import knowManageApi from '~/api/agent/know/manage'
import archive from './_components/archive.vue'
import dataset from './_components/dataset.vue'
import testing from './_components/testing.vue'
import setting from './_components/setting.vue'
import imports from './_components/imports.vue'
import teamed from './_components/teamed.vue'

const route = useRoute()
const router = useRouter()
const currentTab = ref<string>('archive')
const archiveId = ref<string>('')
const knowCode = String(route.params.code)

// 组件地图
const componentMap: any = {
    archive,
    dataset,
    testing,
    setting,
    imports,
    teamed
}

// 菜单列表
const menusList = [
    {
        key: 'archive',
        name: '数据集合',
        icon: 'el-icon-FolderOpened',

    },
    {
        key: 'testing',
        name: '搜索测试',
        icon: 'el-icon-Film'
    },
    {
        key: 'teamed',
        name: '团队成员',
        icon: 'el-icon-User'
    },
    {
        key: 'setting',
        name: '配置',
        icon: 'el-icon-Setting'
    }
]

// 菜单查找
const findValidateMenu = () => {
    const activeTab = String(route.query?.currentTab).toLowerCase()
    const arraysTab = Object.keys(componentMap).map(name => name.toLowerCase())
    currentTab.value = arraysTab.includes(activeTab) ? activeTab : 'archive'
    if (String(route.query?.archiveId)) {
        archiveId.value = String(route.query?.archiveId)
    }
}

// 菜单切换
const handleSwitchMenu = (tab: string, id?: string) => {
    currentTab.value = tab.toLowerCase()
    const queryParams: {
        currentTab: string;
        archiveId?: string
    } = { currentTab: tab }

    if (id) {
        archiveId.value = id
        queryParams.archiveId = id
    } else {
        archiveId.value = ''
    }

    router.replace({
        query: queryParams
    })
}

// 获取详情
const { data: knowData } = await useAsyncData(
    () => knowManageApi.detail(knowCode),
    {
        default() {
            return {} as KnowManageDetailResponse
        }
    }
)

findValidateMenu()
</script>

<style scoped lang="scss">
.layout-know {
    display: flex;
    flex: 1;
    overflow: hidden;
    background-color: var(--el-bg-color);
    border: 1px solid var(--el-border-color-light);
    border-radius: 8px;
    .know-menu {
        display: flex;
        flex: 0 0 200px;
        flex-direction: column;
        height: 100%;
        border-right: 1px solid var(--el-border-color-light);
        .skinny {
            display: flex;
            padding: 15px 10px;
            border-bottom: 1px solid var(--el-border-color-light);
        }
        .option {
            flex: 1 1 0;
            width: 100%;
            padding-inline: 1rem;
            margin-inline: auto;
            font-size: var(--el-font-size-small);
            .item {
                display: flex;
                align-items: center;
                padding: 10px 12px;
                margin: 10px 0;
                font-weight: var(--el-font-size-large);
                color: var(--el-text-color-regular);
                cursor: pointer;
                border-radius: 8px;
                &.active {
                    color: var(--el-color-primary);
                    background-color: var(--el-color-primary-light-9);
                }
            }
        }
    }
    .know-body {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
}
</style>
